<template>
    <div class="p-20 p-t-0 box-shadow-1">
         <div class="table-search" style="width: 100%">
            <el-row :gutter="24">
                <el-col :span="6">
                        <el-input v-model="input" size="medium" @keyup.enter.native="keyDown($event)" placeholder="请输入单号"
                                  class="w-100p"
                                  :maxlength="20">
                            <template slot="prepend">
                                <el-button>单号</el-button>
                            </template>
                        </el-input>
                </el-col>

                <el-col :span="6" >
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <div class="el-input-group__prepend">订单起始日期</div>
                            <el-date-picker
                                    v-model="createAt"
                                    type="date"
                                    class="w-100p"
                                    @change="getEntryTime"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择调拨起始日期" >
                            </el-date-picker>
                        </div>
                </el-col>
                <el-col :span="6"  >
                    <div class="el-input el-input-group el-input-group--prepend el-input--medium">
                        <div class="el-input-group__prepend">订单截止日期</div>
                        <el-date-picker
                                v-model="createAt1"
                                type="date"
                                class="w-100p"
                                @change="getEntryTime1"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                placeholder="选择调拨终止日期" >
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="5"  style="padding-right: 0px;padding-left: 0px;">
                    &nbsp;&nbsp;
                    <el-button  class="btn-info"  icon="el-icon-search" size="medium" @click="search(1)">搜索</el-button>
                    <el-button  class="btn-warning" style="margin-left: 1px" size="medium" icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                </el-col>

            </el-row>
        </div>
        <div class="table-padding">
            <div class="title-buttons">
                     <router-link  v-hasPermission="'management_transferOrder:create'" to="/transferOrders/add">
                        <el-button  class="title-button btn-primary" size="medium" icon="el-icon-plus">新建&nbsp;</el-button>
                    </router-link>
            </div>
            <el-table
                 v-loading="loading"
                 :data="tableData"
                 :border="true"
                 style="width: 100%">
                <el-table-column
                   type="index"
                   width="50">
                 </el-table-column>

                <el-table-column
                        label="单号" width="145">
                    <template  slot-scope="scope">
                        <span>{{scope.row.no}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        label="调出仓库">
                    <template  slot-scope="scope">
                        <span>{{scope.row.transferOutName}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="调入仓库">
                    <template  slot-scope="scope">
                        <span>{{scope.row.transferInName}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="调拨日期">
                    <template  slot-scope="scope">
                        <span>{{scope.row.operateTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="金额">
                    <template  slot-scope="scope">
                        <span>{{scope.row.amount | money}}</span>
                    </template>
                </el-table-column>
                <!--<el-table-column-->
                        <!--label="备注">-->
                    <!--<template  slot-scope="scope">-->
                        <!--<span>{{scope.row.remark}}</span>-->
                    <!--</template>-->
                <!--</el-table-column>-->

                <el-table-column label="操作" width="210">
                    <template  slot-scope="scope">
                        <router-link :to="'/transferOrders/add?type=5&id='+scope.row.id" class="">
                            <el-button type="text" size="small" style="margin: 0px;">查看</el-button>
                        </router-link>
                        <router-link  v-hasPermission="'management_transferOrder:create'" :to="'/transferOrders/add?id='+scope.row.id" v-if="scope.row.state.key=='NOAUDIT'" class="">
                            <el-button type="text" size="small" style="margin: 0px;"  @click="handleEdit(scope.$index, scope.row)"> | 修改</el-button>
                        </router-link>
                        <el-button  v-hasPermission="'management_transferOrder:destory'" v-if="scope.row.state.key=='NOAUDIT'" class=""
                                    type="text"
                                    size="small"
                                    style="margin: 0px;"
                                    @click="handleDelete(scope.$index, scope.row)"> | 删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br>
            <div class="block">
                <el-row>
                    <el-col :span="24" class="text-right">
                       <el-pagination
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="pageSizeSet"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total">
                       </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>

        <PluginConfirm
                :show="dialogIsShow"
                @chooseSure="chooseSure()"
                @chooseCancel="chooseCancel()"
                @dialogResult="dialogResult">
        </PluginConfirm>
    </div>
</template>
<script>

    export default{
        data(){
            return {
                tableData: [],
                loading:false,
                pageSizeSet:window.pageSizeSet,
                pageSize:window.pageSize,
                currentPage:1,
                input:"",
                total:0,
                tableIndex:0,
                supplier:"",
                warehouse:"",
                suppliers:[],
                warehouses:[],
                createAt:"",
                createAt1:"",
                types:[],
                type:"",
                activeName2: 'first',

                dialogIsShow:false,
                curDataRow:null,
                curDataIndex:0
            }
        },
        created(){
            window.this = this;
            this.initData();
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            initData(){
                this.loading=true;
                this.$axios.get("stores/transferOrders?page.pn=1&page.size=" + this.pageSize).then((data)=>{
                    if(data.status==200){
                        var data=data.content;
                        this.tableData=data.content;
                        this.total=data.total;
                        this.warehouses=data.warehouse;
                        this.types=data.types;
                        this.loading=false
                    }else{
                        this.loading=false
                    }
                })
            },

            getEntryTime(val){
                this.createAt=val;
            },
            getEntryTime1(val){
                this.createAt1=val;
            },
            handleSizeChange(val){
                this.pageSize=val;
                 this.search();
            },
            keyDown(ev){
                if(ev.keyCode==13) {
                    this.search(1);
                }
            },
            search(content){
                var search="";
                if(content==1){
                    search="search.no_like="+this.input+"&"+search;
                }

                if(this.createAt!=""){
                    console.log(this.createAt);
                    search="search.operateTime_gte="+this.createAt+" 00:00:00&"+search;
                }
                if(this.createAt1!=""){
                    search="search.operateTime_lte="+this.createAt1+" 23:59:59&"+search;
                }


                this.$axios.get("stores/transferOrders?"+search+"page.size="+this.pageSize).then((data)=>{
                    if(data.status==200){
                      var data=data.content;
                      this.tableData=data.content;
                      this.total=data.total;
                        this.loading=false
                    }else{
                        this.loading=false
                    }
                })
            },
            cleanSearch(){
                this.input="";
                this.createAt="";
                this.createAt1="";
                this.currentPage=1;
                this.search("");
            },
            handleCurrentChange(currentPage){
                this.currentPage=currentPage;
                var search="";
                this.$axios.get("stores/transferOrders?"+search+"page.pn="+currentPage+"&page.size="+this.pageSize).then((data)=>{
                    if(data.status==200){
                      var data=data.content;
                      this.tableData=data.content;
                      this.total=data.total;
                        this.loading=false
                    }else{
                        this.loading=false
                    }
                })
            },
            goBack() {
                this.router.go(-1);
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            /*用户选择提示框后处理*/
            dialogResult(param){
                this.dialogIsShow=param.close;
                if(param.choose==="ok"){
                    //console.log("确定");
                    this.$axios.delete("stores/transferOrders/"+this.curDataRow.id).then(data=>{
                        if(data.status==200){
                            this.tableData.splice(this.curDataIndex,1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initData();
                        }else{
                            this.$message({
                                type: 'error',
                                message: data.message
                            });
                        }
                    })
                }else if(param.choose==="cancel"){
                    //console.log("取消");
                }else{
                    //console.log("不做处理");
                }
            },
            handleDelete(index, row) {
                this.curDataIndex = index;
                this.curDataRow = row;
                this.dialogIsShow = true;
                return false;
            },
        }
    }
</script>
<style scoped>
    .divList{
        width: 120px;height: 39px;float:left;line-height: 39px;text-align: center;color: #7f7f7f;
    }

    .divList:hover{
        color:#000000;
    }
    .jiaodian{
        border-top: 1px solid #cccccc;border-top-left-radius: 6px;border-top-right-radius: 6px;border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;border-bottom: 1px solid #FFFFFF;color:#20a0ff;
    }

</style>
